<template>
    <view class="approve-box" v-if="displayedDataList.length > 0">
        <view class="top flex-start-center" @click="OpenApprove">
            <view class="title flex_1">{{ title }}</view>
            <view class="badge" v-if="number > 0">{{ number }}</view>
            <text class="iconfont icon-jiantouxiangyou" style="font-size: 20rpx;color: #888888;"></text>
        </view>
        <template v-if="displayedDataList.length > 0">
            <view class="content" v-for="(item, index) in displayedDataList" :key="index"
                :class="{ 'content-last': displayedDataList.length - 1 === index }" @click="onClickApprove(item)">
                <view class="sub-title-box flex-row-between">
                    <view class="sub-title">
                        {{ item.BillRealType }}
                        (<span class="AppCount"> {{ item.AppCount }}</span>)
                        <!-- <template v-if="item.AppCount === 1">{{ item.BillId }}</template>
<template v-else>
                            (<span class="AppCount"> {{ item.AppCount }}</span>)
                        </template> -->
                    </view>
                    <view class="dt" v-if="item.AppCount === 1">{{ item.c_rec_dt }}</view>
                </view>
                <view class="flex-row-between">
                    <view class="describe text-ellipsis flex_1">{{ item.BillId }}</view>
                    <view class="dt w_190">{{ item.c_rec_dt }}</view>
                </view>
                <view class="describe ellipsis-line-2" style="line-height: 36rpx;">{{ item.BillTitle }}</view>
                <!-- <view class="describe ellipsis-line-2 height_36" v-if="item.AppCount === 1">{{ item.BillTitle }}</view>

                <template v-if="item.AppCount > 1">
                    <view class="flex-row-between">
                        <view class="describe text-ellipsis flex_1">{{ item.BillId }}</view>
                        <view class="dt w_190">{{ item.c_rec_dt }}</view>
                    </view>
                    <view class="describe ellipsis-line-2" style="line-height: 36rpx;">{{ item.BillTitle }}</view>
                </template> -->
            </view>
            <view class="btn-box flex-row-center" @click="onToggleState" v-if="dataList.length > 4">
                <text style="margin-right: 10rpx;">{{ isExpanded ? '隐藏' : '更多' }}</text>
                <view class="iconfont"
                    :class="{ 'icon-jiantouxiangshang': isExpanded, 'icon-jiantouxiangxia': !isExpanded }">
                </view>

            </view>
        </template>
        <view v-else class="no-data">
            <image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch, onUnmounted } from 'vue';
import service from '@/common/service';
import dayjs from 'dayjs';
import dateRangUtil from '@/common/dateRangUtil';
import eventBus from '@/pages/MainViews/eventBus';
import { useLoginStore } from '@/store/modules/useLoginStore';
import { useMainStore } from '@/store/modules/store';
import { useRefreshStore } from '@/store/useRefreshStore';
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const LoginStore = useLoginStore();

/**
 *  HomeApprove 待审批
 *  @property {string} user = 登录人
 */

const title = ref('我的待审批');
const number = ref(0);


interface dataObj {
    BillType: string;
    BillRealType: string;
    AppCount: number;
    c_rec_dt: string;
    NoReadCount: number;
    ReadCount: number;
    ExtendFilterData?: string;
    BillId: string;
    BillTitle: string;
}
const dataList = ref<dataObj[]>([]);
// 获取待审批
const getData = () => {
    service.enjoyShowLoading('正在查询...');
    let request = {
        url: LoginStore.EnjoyMain,
        data: {
            UniqueKey: "管易通40审批",
            MethodName: "QueryUnApproveBillTypeInfoList",
            ObjectData: {
                IsNotPage: false,
                PageSize: 10,
                CurrentPage: 1,
                Tag: {
                    Search: "",
                    Type: "",
                    SendUser: "",
                    UserNo: loginInfo.sUser,
                },
            },
        },
    };
    dataList.value = [];
    number.value = 0;
    service.request(request, (res: any) => {
        if (res && res.data && !res.data.HasException) {
            const objectData = res.data.ObjectData;
            if (objectData && objectData.ReturnObject && objectData.ReturnObject.length > 0) {
                const currentYear = dayjs().year();
                 dataList.value = objectData.ReturnObject.map((n: dataObj)=> {
                    const date = dayjs(n.c_rec_dt);
                    const dateYear = date.year();
                    n.c_rec_dt = dateYear === currentYear ? dayjs(n.c_rec_dt).format('MM-DD HH:mm') : date.format('YYYY-MM-DD HH:mm')
                    return n
                });
                const sumAppCount = objectData.ReturnObject.reduce((accumulator: number, current: dataObj) => {
                    return accumulator + current.AppCount;
                }, 0);

                number.value = sumAppCount;
            }

        } else {
            service.enjoyShowToast(res.data.Exception && res.data.Exception.Message || '')
        }
        service.enjoyHideLoading();
    }, () => {
        service.enjoyHideLoading();
        console.log('失败')
    });
}

/* 展开收起 */
const isExpanded = ref(false);
const displayedDataList = computed(() => {
    if (isExpanded.value) {
        return dataList.value;
    } else {
        return dataList.value.slice(0, 4);
    }
});
const onToggleState = () => {
    isExpanded.value = !isExpanded.value;
}
const OpenApprove = () => {
    uni.navigateTo({
        url: '/pages/OaViews/Approve/index'
    });
}
const onClickApprove = (e) => {
    uni.navigateTo({
        url: "/pages/OaViews/Approve/ApproveList?item=" + JSON.stringify(e) + "&current=0"
    });
}
const refreshQueryEvent = () => {
    getData();
};

onMounted(() => {
    getData();
    eventBus.on('refresh-HomeApprove', refreshQueryEvent)
});

onUnmounted(() => {
    eventBus.off('refresh-HomeApprove', refreshQueryEvent)
})
</script>

<style lang="scss" scoped>
.approve-box {
    padding: 28rpx;
    margin-bottom: 20rpx;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 20rpx;
}

.top {
    margin-bottom: 36rpx;

    .title {
        position: relative;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
    }

    .badge {
        padding: 0 8rpx;
        height: 32rpx;
        min-width: 32rpx;
        color: #FFFFFF;
        font-size: 20rpx;
        font-weight: 500;
        background: #FF4000;
        border-radius: 20rpx;
        line-height: 32rpx;
        text-align: center;
        margin-right: 15rpx;
        box-sizing: border-box;
        font-family: '黑体', sans-serif;
    }
}

.content {
    margin-bottom: 32rpx;

    .sub-title-box {
        margin-bottom: 8rpx;
    }

    .sub-title {
        flex: 1;
        position: relative;
        height: 100%;
        margin-left: 32rpx;
        color: #000000;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        word-break: break-all;

        &::before {
            content: "";
            /* 伪元素的内容为空 */
            position: absolute;
            /* 使用绝对定位相对于父元素定位 */
            top: 50%;
            /* 垂直居中 */
            transform: translateY(-50%);
            /* 调整垂直位置以实现精确居中 */
            left: -16px;
            /* 与文本的距离为8px */
            width: 8px;
            height: 8px;
            background-color: #FF4000;
            /* 指定背景颜色 */
            border-radius: 50%;
            /* 创建圆形效果 */
        }
    }

    .dt {
        padding-left: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #888888;
        text-align: right;
    }

    .AppCount {
        color: #FF4000;
    }

    .describe {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;
        word-break: break-all;
    }
}

.content-last {
    margin-bottom: 0 !important;
}

.btn-box {
    padding: 0 16rpx;
    margin: 40rpx auto 0;
    width: 120rpx;
    height: 40rpx;
    font-size: 11px;
    color: #888888;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 99px;
    box-sizing: border-box;

    .iconfont {
        font-size: 20rpx;
    }
}

.height_36 {
    line-height: 36rpx;
}

.w_190 {
    max-width: 190rpx !important;
}
</style>